[WIP] Refactor Studio layout to match Supabase style#1204
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- Create PackageSwitcher component extracted from app-sidebar - Create TopBar component with global chrome (Org/Env/Package switchers, breadcrumbs, search, mode badge) - Update __root.tsx to integrate TopBar in flex column layout - Remove OrgHeader from global-sidebar (moved to TopBar) - Remove Package Switcher header from app-sidebar (moved to TopBar) Agent-Logs-Url: https://github.com/objectstack-ai/framework/sessions/095ed50f-741b-4562-b7f1-f4cadbe5b7b1 Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
- Remove SiteHeader imports and usage from all 11 route files - Adjust container height classes (remove h-svh, use flex-1) - Delete site-header.tsx component (replaced by TopBar) Agent-Logs-Url: https://github.com/objectstack-ai/framework/sessions/095ed50f-741b-4562-b7f1-f4cadbe5b7b1 Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
- Remove SidebarTrigger from TopBar (was in header) - Add SidebarFooter with SidebarTrigger to both GlobalSidebar and AppSidebar - Move SidebarProvider from root wrapper to RequireAuth for proper layout control - Change SidebarProvider height from h-svh to min-h-0 for flexible full-width layout - Update TopBar to remove SidebarTrigger import and usage Agent-Logs-Url: https://github.com/objectstack-ai/framework/sessions/cca4add0-2ad9-4a22-964c-49d4c9e4eb36 Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors Studio’s authenticated layout toward a Supabase-style “TopBar + Sidebar + Content” shell, centralizing org/env/package context in a global top chrome and removing per-page SiteHeader usage.
Changes:
- Added a new
TopBar(with breadcrumbs, global controls, and optionalPackageSwitcher) and wired it into the authenticated root layout. - Removed
SiteHeaderand updated multiple routes to rely on the new root flex/scroll container structure. - Simplified
GlobalSidebar/AppSidebarheaders (moving switching UI out) and adjusted sidebar layout behavior.
Reviewed changes
Copilot reviewed 19 out of 19 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/studio/src/routes/__root.tsx | Introduces the new authenticated shell structure (TopBar + sidebar/content) and package syncing logic for the TopBar. |
| apps/studio/src/components/top-bar.tsx | New global top chrome component with URL-inferred breadcrumbs and an API path badge. |
| apps/studio/src/components/package-switcher.tsx | New extracted dropdown component for switching installed packages (used by TopBar). |
| apps/studio/src/components/site-header.tsx | Removes the old per-page header component entirely. |
| apps/studio/src/components/global-sidebar.tsx | Removes org switcher header and focuses sidebar on navigation; adds footer trigger. |
| apps/studio/src/components/app-sidebar.tsx | Removes the package switcher header UI and adds footer trigger (metadata tree remains). |
| apps/studio/src/components/ui/sidebar.tsx | Adjusts SidebarProvider wrapper sizing classes to work with the new layout. |
| apps/studio/src/routes/index.tsx | Removes SiteHeader and updates height/overflow handling to fit the new root layout. |
| apps/studio/src/routes/api-console.tsx | Removes SiteHeader and relies on the new root chrome. |
| apps/studio/src/routes/orgs.index.tsx | Removes SiteHeader and updates scroll container classes. |
| apps/studio/src/routes/orgs.new.tsx | Removes SiteHeader and updates scroll container classes. |
| apps/studio/src/routes/orgs.$orgId.tsx | Removes SiteHeader and updates scroll container classes. |
| apps/studio/src/routes/environments.index.tsx | Removes SiteHeader and updates layout sizing to integrate with root shell. |
| apps/studio/src/routes/environments.$environmentId.index.tsx | Removes SiteHeader and updates layout sizing to integrate with root shell. |
| apps/studio/src/routes/environments.$environmentId.packages.tsx | Removes SiteHeader and updates layout sizing to integrate with root shell. |
| apps/studio/src/routes/environments.$environmentId.$package.tsx | Removes h-svh to avoid height conflicts under the new root flex layout. |
| apps/studio/src/routes/environments.$environmentId.$package.index.tsx | Removes SiteHeader and keeps content as a scroll-managed flex child. |
| apps/studio/src/routes/environments.$environmentId.$package.objects.$name.tsx | Removes SiteHeader and lets the root TopBar handle context/breadcrumbs. |
| apps/studio/src/routes/environments.$environmentId.$package.metadata.$type.$name.tsx | Removes SiteHeader and lets the root TopBar handle context/breadcrumbs. |
Comment on lines
+203
to
+207
| {item.href ? ( | ||
| <BreadcrumbLink href={item.href}>{item.label}</BreadcrumbLink> | ||
| ) : ( | ||
| <BreadcrumbPage className="font-medium">{item.label}</BreadcrumbPage> | ||
| )} |
Comment on lines
+137
to
+156
| // Authenticated layout with TopBar + Sidebar + Content | ||
| if (user) { | ||
| const showGlobalSidebar = isGlobalShellPath(location.pathname); | ||
|
|
||
| return ( | ||
| <> | ||
| <GlobalSidebar /> | ||
| {children} | ||
| </> | ||
| <SidebarProvider> | ||
| <div className="flex min-h-screen w-full flex-col"> | ||
| <TopBar | ||
| packages={packages} | ||
| selectedPackage={selectedPackage} | ||
| onSelectPackage={handleSelectPackage} | ||
| /> | ||
| <div className="flex flex-1 w-full overflow-hidden"> | ||
| {showGlobalSidebar && <GlobalSidebar />} | ||
| <main className="flex flex-1 min-w-0 overflow-hidden"> | ||
| {children} | ||
| </main> | ||
| </div> | ||
| </div> | ||
| </SidebarProvider> |
| } | ||
| className={cn( | ||
| "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex h-svh w-full overflow-hidden", | ||
| "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-0 w-full", |
| * Global chrome component in Supabase style. | ||
| * Renders at the top of authenticated Studio layouts with: | ||
| * - Left segment: OrganizationSwitcher + EnvironmentSwitcher + PackageSwitcher | ||
| * - Center segment: SidebarTrigger + dynamic breadcrumbs (inferred from URL) |
Comment on lines
+300
to
301
| // Package switcher state (no longer used in AppSidebar, moved to TopBar) | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.